<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Clear Screen</title>
		<style type="text/css">
			*{
				user-select: none;
			}
			html, body{
				height: 100%;
				border: 0px;
				padding: 0px;
				margin: 0px;
				background-size: 100% 100% !important;
			}
			.attention{
				font-size: 25pt;
				width: 100%;
				color: white;
				text-align: center;
				margin: 0px auto;
				position: absolute;
				z-index: 2;
			}
			.back{
				background-color: black !important;
				width: 100%;
				height: 100%;
				background-size: 100% 100% !important;
			}
		</style>
	</head>
	<body>
		<div class="attention">
			单击屏幕进入休眠, 再单击退出
		</div>
		<div class="back"></div>
		<script type="text/javascript">
			(() => {
				let IS_SLEEP = false;
				let USE_BACKGROUND = false;
				const fullScreen = (IS_QUIT) => {
					if(!IS_QUIT){
						let element = document.documentElement;
						let requestMethod = element.requestFullScreen || //W3C
						element.webkitRequestFullScreen || //Chrome等
						element.mozRequestFullScreen || //FireFox
						element.msRequestFullScreen; //IE11
						if (requestMethod) {
							requestMethod.call(element);
						}
					}else{
						let exitMethod = document.exitFullscreen || //W3C
						document.mozCancelFullScreen || //Chrome等
						document.webkitExitFullscreen || //FireFox
						document.webkitExitFullscreen; //IE11
						if (exitMethod) {
							exitMethod.call(document);
						}
					}
				};
				//function to toogle 
				const toogleStat = () => {
					let main = document.querySelector(".attention");
					if(!IS_SLEEP){
						main.style.display = "none";
						document.body.style.cursor = "none";
						IS_SLEEP = true;
					}else{
						main.style.display = "block";
						document.body.style.cursor = "auto";
						IS_SLEEP = false;
					}
					fullScreen(!IS_SLEEP);
				};
				
				const toogleBackground = () => {
					let back = document.querySelector(".back");
					if(!USE_BACKGROUND){
						back.style.background = "url(./background.png)";
					}else{
						back.style.background = "";
					}
					USE_BACKGROUND = !USE_BACKGROUND;
				};
				
				window.addEventListener("contextmenu", (evt) => {
					evt.preventDefault();
				});
				
				window.addEventListener("mousedown", (evt) => {
					if(evt.button == 0){
						toogleStat();
					}else if(evt.button == 2){
						toogleBackground();
						evt.preventDefault();
					}
				});
				
				IMG_BRIGHTNESS = 50;
				window.addEventListener("mousewheel", (evt) => {
					const max = 150;
					const min = 30;
					if(evt.wheelDelta > 0){
						if(IMG_BRIGHTNESS < max){
							IMG_BRIGHTNESS += 5;
						}
					}else{
						if(IMG_BRIGHTNESS > min){
							IMG_BRIGHTNESS -= 5;
						}
					}
					let back = document.querySelector(".back");
					back.style.filter = `brightness(${IMG_BRIGHTNESS}%)`;
				});
				window.addEventListener("keypress", (evt) => {
					if(evt.keyCode == 32){
						toogleStat();
					}
				});
			})();
		</script>
	</body>
</html>
